<!DOCTYPE html>
<html lang="en">
<head>
    <title>${title}_江苏佳盛源</title>
    <meta name=”keywords” content=”${keywords}_江苏佳盛源”/>
    <meta name="description" content="${description}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content=""/>
    <!-- bootstrap-css -->
    <link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!--// bootstrap-css -->
    <link rel="icon" type="image/x-icon" href="${ctxPath}/static/faviconTitle.ico"/>
    <!-- css -->
    <link rel="stylesheet" href="${ctxPath}/static/css/stylea.css" type="text/css" media="all"/>
    <link href="${ctxPath}/static/css/zhyd.comment.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/zhyd.core.css" rel="stylesheet">
    <!--// css -->
    <!-- font-awesome icons -->
    <link href="${ctxPath}/static/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <script src="${ctxPath}/static/js/jquery-2.1.1.min.js"></script>
    <script src="${ctxPath}/static/js/bootstrap.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <style>
        p {
            color: #727272;
        }

        .allbtn {
            border-radius: 40px;
            border: 1px solid black;
            width: 80px;
            padding: 3px;
            background-color: transparent;
            margin-top: 10px;
            outline: none;
        }
        .allbtn:hover{
            background-color: #50C9A0;
            color: white;
            border: 1px solid white;
        }

        .divimg {
            height: 240px;
            width: 240px;
            border-radius: 50%;
            background-color: white;
            border: solid 7px #50c9a0;
        }
    </style>
</head>
<body>
<!--项目介绍列表-->
<!--banner-->
@include("../_header.html",{current:'项目介绍'}){}
<div class="w3layouts-banner-top-functionClass visible-lg-block visible-md-block"
     style="background-size: 100% 100% ;height: 370px">
</div>
<div class="banner-top visible-xs-block visible-sm-block"
     style="height: 150px;background: url('${ctxPath}/static/images/pc/functionClass/项目介绍手机.jpg') no-repeat 0 0;background-size: 100% 100%;">
</div>
<!--//banner-->
<div class="container-fluid visible-md-block visible-lg-block" style="padding: 0">
    <div style="margin-top: 10px;position: relative;">
        <div class="container-fluid">
            <div class="container" style="margin-top: 10px;position: relative">
                <div class="blog-main news-list-body mediaCont" style="margin-top: 30px">

                </div>
                <div class="loading-box loadingCont">
                    <img src="${ctxPath}/static/images/icon/loading.gif">
                    <span>加载中...</span>
                </div>
                <div class="no-cont-box noCont">暂无更多项目</div>
                <div class="col-md-12 visible-lg-block visible-md-block loadBtn" style="padding:20px 0;margin-bottom:20px;border-bottom:1px solid #d4d4d4;text-align: left;cursor:pointer;" onclick="more()">
                    <span style="display:inline-block;vertical-align:middle;font-size: 24px; font-weight: bold;">更多</span>
                    <img src="${ctxPath}/static/images/icon/箭头2.png" width="20">
                </div>
            </div>
        </div>
    </div>
</div>


<!--mobile -->
<div class="container-fluid visible-xs-block visible-sm-block" style="padding: 0;min-height: 680px">
    <div class="container" style="margin-top: 10px;position: relative;">
        <div class="blog-main news-list-body mobile-news-list mediaCont" style="margin-top: 10px">

        </div>
        <div class="loading-box loadingCont">
            <img src="${ctxPath}/static/images/icon/loading.gif">
            <span>加载中...</span>
        </div>
        <div class="no-cont-box noCont">暂无更多项目</div>
        <div class="col-md-12 loadBtn" style="padding:20px 0;margin-bottom:20px;border-bottom:1px solid #d4d4d4;text-align: left;cursor:pointer;" onclick="more()">
            <span style="display:inline-block;vertical-align:middle;font-size: 16px; font-weight: bold;">更多</span>
            <img src="${ctxPath}/static/images/icon/箭头.png" width="14">
        </div>
    </div>
</div>

<!-- footer -->
@include("../_footer.html"){}
<!-- //footer -->
<script src="${ctxPath}/static/js/responsiveslides.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/move-top.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/easing.js"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript" src="${ctxPath}/static/js/scroller-menu.js"></script>
<!-- //here ends scrolling icon -->
<script type="text/javascript">
    $(function (){
        getList();
    })
    var page = 1;
    var isLoad = true;
    function getList(){
        $(".loadingCont").show();
        $.ajax({
            url:'/product/Function/ajaxList',
            method:'POST',
            data:{page:page,rows:8},
            dataType:"json",
            success:function (res){
                let cont = '';
                if(res.result && res.result.length > 0){
                    isLoad = true
                    for(var i=0;i<res.result.length;i++){
                        var item = res.result[i];
                        cont += '<a class="news-list-item" href="/product/details/'+item.id+'" target="_blank">';
                        cont += '<div class="news-cont-box">';
                        cont += '<h4 class="title">'+item.functionClassName+'</h4>';
                        cont += '<p class="time">'+item.updateDatetime+'</p>';
                        cont += '<p class="intro">'+item.description+'</p>';
                        cont += '</div>';
                        cont += '<div class="news-item-img" style="background-image: url('+item.pic+')">';
                        cont += '</div></a>'
                    }
                    $(".mediaCont").append(cont);
                }else{
                    $(".noCont").show();
                    $(".loadBtn").remove();
                }
                $(".loadingCont").hide();
            }
        })
    }

    function more(){
        if(isLoad){
            isLoad = false;
            page += 1;
            getList();
        }
    }
</script>

</body>
</html>
